<template>
	
	  <div class="h5-list border-top-bottom-default">
       	 <div class="h5-list-flex h5-list-title border-bottom-primary h5-title-height-lg green">
                <div class="h5-list-title-img"><img src="../../assets/images/title-process.png"></div>
                	审批进度
            </div>
        <div class="h5-steps content">
          
            <div class="h5-steps-item" v-for="(row,index) in workFlowHistroyList">
                <div class="h5-steps-tail" style="padding-right: 0px;"><i></i></div>
                <div class="h5-steps-step">
                    <div class="h5-steps-extra fl">{{row.taskName}}</div>
                    <div class="h5-steps-head fl">
                        <div class="h5-steps-head-inner">
                          
                           <span class="h5-steps-icon">
                           	<img v-if="row.isFinish" src="../../assets/images/icon-steps_circle.png">
                            <img v-if="row.isFinish==false" src="../../assets/images/icon-steps_notice.png">
                           </span>
                        
                        </div>
                    </div>
                    <div class="h5-steps-main">
                        <div class="h5-steps-title h5-list-item h5-height-default">
                            <img  v-if="row.isFinish" src="../../assets/images/icon_steps_allow.png">
                            <img  v-if="row.isFinish==false" src="../../assets/images/icon_steps_next.png">
                            <b>{{row.auditorName}}</b>
                            <span>{{row.auditorTime}}</span>
                        </div>
                          <div class="h5-steps-description" v-if="row.message!=null"><b>原因：{{row.message}}</b></div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
	
</template>

<script type="text/javascript">
	export default{
		props: ['processId','userId'],
		data(){
			return{
				workFlowHistroyList:[]
			}
		},
		watch:{
			'processId':function(newValue,oldValue){
				var _self = this;
				var url = _self.utilHelper.apiUrl+'/wordFlowData/workFlowHistroy';
				var processId = newValue;
				var params = {
					processInstanceId:processId,
					userId:_self.userId
				}
				_self.$http.post(url,params).then((response)=>{
					
					var body = response.body;
					if(body.res=="1"){
						_self.workFlowHistroyList = body.obj;
					}else{
						layer.alert("系统异常,请联系管理员!");
					}
					
				});
			}
		}
		
	}
	
</script>
